<template>
    <div class='container'>
        <div class="menu">
            <t-menu theme="light" default-value="1" expand-mutex :collapsed="collapsed">
                <t-menu-item :value="menu.value" v-for="menu in menus">
                    <template #icon>
                        <t-icon :name="menu.icon" />
                    </template>
                    {{ menu.title }}
                </t-menu-item>

                <template #operations>
                    <t-button variant="text" shape="square" @click="changeCollapsed">
                        <template #icon><t-icon name="view-list" /></template>
                    </t-button>
                </template>
            </t-menu>

        </div>

        <div class="content">
            <h4>Table Editor</h4>
            <t-select showArrow size="small" placeholder="默认">
                <template #panelTopContent>
                    <t-input placeholder="搜索" size="small">
                        <template #prefix-icon>
                            <t-icon name="search" />
                        </template>
                    </t-input>
                </template>
                <template #panelBottomContent>
                    <div class="create-schema">
                        <t-typography-text> 创建新的schema</t-typography-text>
                    </div>
                </template>
                <t-option key="default" label="默认" value="默认" />
                <t-option key="sb" label="sb" value="sb"></t-option>
                <t-option key="bd" label="bd" value="bd" />
            </t-select>
            <t-input placeholder="创建table" size="small" />
            <t-input placeholder="搜索table" size="small" />
            <div class="tables">
                <div class="table " v-for="i, index in 10">
                    <div class="icon-left">
                        <t-icon name="table" />
                    </div>
                    <div class="name">
                        <t-typography-text>table{{ index }}</t-typography-text>
                    </div>
                    <div class="icon-right">
                        <t-icon name="table" />
                    </div>
                </div>

            </div>
        </div>
        <div class="edit">
            <t-tabs v-model="value" theme="card" :addable="true" @add="addTab" @remove="removeTab">
                <t-tab-panel v-for="data in panelData" :key="data.value" :value="data.value" :label="data.label"
                    :removable="data.removable">
                    <Table style="width: 100%;"></Table>
                </t-tab-panel>
            </t-tabs>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import type { ButtonProps } from 'tdesign-vue-next';
import Table from './Table.vue';
const collapsed = ref(true);

const changeCollapsed: ButtonProps['onClick'] = () => {
    collapsed.value = !collapsed.value;
};
const menus = ref([
    {
        value: '1',
        title: '消息',
        icon: 'play-circle'
    },
    {
        value: '2',
        title: '个人中心',
        icon: 'user-circle'
    },
    {
        value: '3',
        title: '视频区',
        icon: 'play-circle'
    },
    {
        value: '4',
        title: '资源编辑',
        icon: 'edit-1'
    },
    {
        value: '5',
        title: '设置',
        icon: 'setting'
    }
])

import type { TabsProps } from 'tdesign-vue-next';
let id = 0;
const value = ref('first');
const panelData = ref([
    {
        value: 'first',
        label: '原有选项卡1',
        removable: true,
        content: '原有选项卡1内容',
    },
    {
        value: 'second',
        label: '原有选项卡2',
        removable: true,
        content: '原有选项卡2内容',
    },
]);
const addTab: TabsProps['onAdd'] = () => {
    panelData.value.push({
        value: `${id}`,
        label: `新选项卡${id}`,
        removable: true,
        content: '新选项卡内容',
    });
    value.value = `${id}`;
    id += 1;
};
const removeTab: TabsProps['onRemove'] = ({ value: val, index }) => {
    if (index < 0) return false;
    panelData.value.splice(index, 1);
    if (panelData.value.length === 0) return;
    if (value.value === val) {
        value.value = panelData.value[Math.max(index - 1, 0)].value;
    }
};
</script>
<style lang='scss' scoped>
.container {
    display: inline-flex;
    direction: row;
    width: 100%;
    height: 100%;
    gap: 10px;

    .menu {

        height: 100%;
        border: 1px solid #e5e5e5;
    }
}

.tables {
    display: inline-flex;
    flex-direction: column;
    margin: 10px 10px 10px 10px;

    .table {
        display: flex;
        // justify-content: left;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        gap: 10px;

        .icon-right {
            font-size: 15px;

        }

        // .left {
        //     justify-content: left;
        // }

        // .right {
        //     justify-content: right;
        // }
    }
}
</style>